<template>
  <div class="app-container">
      我的成绩 
       <el-select v-model="param.reportType" placeholder="请选择" @change="bianhua">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        
      <div id="main" style="width: 600px;height: 400px;"></div>
  </div>
</template>

<script>
import { getMyResultList,getMyResult } from '@/api/result'
import { deepClone } from '@/utils'
import echarts from 'echarts'

export default {
  data() {
    return {
      resultList: [],
      dialogVisible: false,
      dialogTitle: '',
      roleList: [],
      checkedList: [],
      param :{
        start: 0,
        limit: 10,
        reportType: ''
      },
      pageSize: 10, //每一页的数据大小
      currpage: 1, //当前页
      total:0, //总条数
      charts: '',
      opinionXData: [],
      opinionYData: [],
      options: [{
          value: '0',
          label: '周报'
        }, {
          value: '1',
          label: '月报'
        }, {
          value: '2',
          label: '整体成绩'
        }]
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  //页面打开时执行的方法
  created() {
  },
  mounted() {
    this.$nextTick(function() {
       this.getMyResult()
				this.drawBar('main')
			})
  },
  methods: {
    async getMyResultList() {
      let res = await getMyResultList(this.param)
      this.resultList = res.beans
      this.total = res.bean.total
    },
    //页大小变化
     handleSizeChange(val) {
      this.pageSize = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.getMyResultList();
    },
    //页标号变化
    handleCurrentChange(val) {
      this.currpage = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.getMyResultList();
    },
    selectMyResult(){
      this.param.start = 0;
      this.param.limit = 10;
      this.currpage = 1;
      this.getMyResultList()
    },
    //显示折线图表
    drawLine(id) {
				this.charts = echarts.init(document.getElementById(id))
				this.charts.setOption({
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data:['分数']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},

					xAxis: {
						type: 'category',
					  data : this.opinionXData
					},
					yAxis: {
						type: 'value'
					},

					series: [
                {
                    name:'分数',
                    type:'line',
                    stack: '总量',
                    data:this.opinionYData
                }
          ]
				})
			},
      drawBar(id) {
				this.charts = echarts.init(document.getElementById(id))
				this.charts.setOption({
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data:['分数']
					},
					xAxis: {
						type: 'category',
					  data : this.opinionXData
					},
					yAxis: {
						type: 'value'
					},
					series: [
                {
                    name:'分数',
                    type:'bar',
                    itemStyle:{
                      normal:{
                        color:'#0082cc'
                         }
                    },
                    showBackground: true,
                    backgroundStyle: {
                      color: 'rgba(180, 180, 180, 0.2)'
                    },
                    data:this.opinionYData
                }
          ]
				})
			},
      async bianhua(){
        this.opinionXData=[]
        this.opinionYData=[]
        if(this.param.reportType==0){
          await this.getMyResultList()
          this.resultList.forEach(v=>{
            this.opinionXData.push("第"+v.reportLevel+"周")
            this.opinionYData.push(v.resultValue)
          })
          this.drawLine('main')
        }else if(this.param.reportType==1){
          await this.getMyResultList()
          // this.opinionXData=["第一月", "第二月", "第三月", "第四月"]
          // this.opinionYData=[80, 70, 70, 85]
          this.resultList.forEach(v=>{
            this.opinionXData.push("第"+v.reportLevel+"月")
            this.opinionYData.push(v.resultValue)
          })
          this.drawLine('main')
        }else{
          this.getMyResult()
        }
      },
      async getMyResult(){
            let res = await getMyResult()
           this.opinionYData.push(res.bean.peacetimeResult)
           this.opinionYData.push(res.bean.centreResult)
           this.opinionYData.push(res.bean.finalResult)
           this.opinionYData.push(res.bean.sumResult)
          console.log(this.opinionYData)
          this.opinionXData=["平时成绩","中期报告成绩", "实训报告成绩", "总成绩"]
          this.drawBar('main')
      }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
